<template>
    <div>
      <a-select
        :allowClear="allowClear"
        :mode="multi==true?'multiple':'default'"
        style="width: 100%"
        :placeholder="placeholder"
        @deselect="deselect"
        v-model="ids"
        :open="open"
        :disabled="disabled"
        @change="selectChange"
        @dropdownVisibleChange="selectIds">
        <a-select-option   v-for="item in selectedObj" :key="item.id">{{showName!=null?item.htmc:item.finalNo}}</a-select-option>
  <!--      <a-select-option v-else v-for="item in selectedObj" :key="item.id">{{item.htmc}}({{item.htbh}})</a-select-option>-->
      </a-select>
      <SelectContractNumberInputModel ref="inputModal" :penetrate="penetrate" :isCategoryType="isCategoryType" :htlx="htlx" :urlList="this.url.urlList" :multi="multi" :signUnit="signUnit" :jytd="jytd" :changeStatus="changeStatus" :allList="allList" :projectId="projectId" @choseObj="choseObj"></SelectContractNumberInputModel>
    </div>
  </template>
  
  <script>
    import SelectContractNumberInputModel from './modules/SelectContractNumberInputModel'
    import {getAction} from '@/api/manage'
  
    export default {
      name: "SelectContractNumberInput",
      components: {SelectContractNumberInputModel},
      props: {
        disabled: {
          type: Boolean,
          required: false,
          default: false
        },
        penetrate: {
          type: String,
          default: 'billNo',
        },
        open: {
          type: Boolean,
          required: false,
          default: false
        },
        value: {
          type: String,
          required: false
        },
        multi: {
          type: Boolean,
          default: false,
          required: false
        },
        props:{
          type: Object,
          default:null,
        },
        //标识动态返回展示数据
        flag: {
          type: Boolean,
          default: true,
          required: false
        },
        //多选标识
        muitFlag: {
          type: Boolean,
          default: false,
          required: false
        },
        htlx: {
          type: [String, Number],
          default: null,
          required: false
        },
        status: {
          type: String,
          required: false
        },
        projectId: {
          type: String
        },
        isCategoryType: {
          type: String
        },
        changeStatus: {
          type: String,
          default: ''
        },
        signUnit: {
          type: String,
          default: ''
        },
        //是否查询所有
        allList: {
          type: Boolean,
          default: false,
          required: false
        },
        showName: {
          type: String,
          default: null
        },
        jytd: {
          type: String,
          default: null
        },
        allowClear: {
          type: Boolean,
          default: false,
          required: false
        },
        placeholder: {
          type: String,
          default: '请选择合同'
        }
      },
      data() {
        return {
          val: '',
          ids: [],
          selectedObj: [],
          deleteIds: [],
          list: [],
          objs:"",
          url: {
            queryById: "/api/erp/omc/contractmanager/erpOmcContractManagerFinal/queryById",
            queryByIds: "/api/erp/omc/contractmanager/erpOmcContractManagerFinal/queryByIds",
            urlList:"/api/erp/omc/contractmanager/erpOmcContractManagerFinal/list2?status="
          }
        }
      },
      created() {
        this.url.urlList += this.status ? this.status : '2,3,7'
        if (!!this.htlx) {
          this.url.urlList += `&htlx=${this.htlx}`
        }
      },
      mounted() {
        // console.log(`selected ${this.ids}`);
        // console.log('this.value', this.val)
        this.initObj(this.value);
        //debugger;
      },
      watch: {
        value(val) {
          this.initObj(val);
        },
      },
      model: {
        prop: 'value',
        event: 'change'
      },
      methods: {
        initObj(ids) {
          console.log("allList:",this.allList);
          console.log('this.val',this.val)
          console.log('this.muitFlag',!this.muitFlag)
          if (this.val && !this.muitFlag) {
            return
          }
          this.val = ids;
          // console.log(ids);
          this.deleteIds = [];
          this.selectedObj = [];
          if(ids&&ids.length>0) {
            this.ids = ids.split(",");
            let url='';
            let param={};
            if(this.ids.length==1){
              url=this.url.queryById;
              param={id:ids};
            }else{
              url=this.url.queryByIds;
              param={ids:ids};
            }
            getAction(url,param).then((res)=>{
              if(res.success){
                if(!Array.isArray(res.result)){
                  this.selectedObj.push(res.result);
                }else{
                  for(let i=0;i<res.result.length;i++){
                    this.selectedObj.push(res.result[i]);
                  }
                }
                this.$refs.inputModal.edit(res.result,this.ids);
              }
            });
          } else{
            this.ids = [];
            this.$refs.inputModal.edit(null,null);
          }
  
        },
        resetObj() {
          this.userType = false;
          this.ids = [];
          this.selectedObj = [];
          this.deleteIds = [];
          this.open = false;
          this.$refs.inputModal.edit(null, null);
        },
        selectChange() {
          if(!this.ids || this.ids.length == 0) {
            this.selectedObj = []
            this.choseObj(this.selectedObj)
          }
        },
        selectIds() {
          if(!this.disabled){
            this.deleteId();
            console.log("allList:",this.allList);
            // if(!this.allList && !this.projectId){
            //   this.$message.warning('请先选择项目')
            //   return
            // } else {
              this.$refs.inputModal.add(this.selectedObj, this.ids);
          //  }
          }
        },
        deselect(value, option) {
          console.log('----------------------------------')
          this.deleteIds.push(value);
          this.deleteId();
          this.choseObj(this.selectedObj);
        },
        deleteId() {
          console.log('----------------------------------', this.deleteIds)
          let that = this;
          this.selectedObj = this.selectedObj.filter(function (e) {
            return that.deleteIds.indexOf(e.id) == -1;
          })
          this.deleteIds = [];
        },
        // 子modal回调
        choseObj: function (list) {
          this.selectedObj = list;
          this.ids = [];
          for (var i = 0; i < list.length; i++) {
            this.ids.push(list[i].id);
          }
          this.objs=this.ids.join(",");
          console.log('list', list)
          console.log('this.objs', this.objs)
          this.$emit("change", this.objs);
          this.$emit("back", this.selectedObj);
        },
      }
    }
  </script>
  
  <style scoped lang="less">
  .p-select{
    ::v-deep {
    .ant-select-selection__rendered {
        width: 90% !important;
        display: inline !important;
      }
    }
  }
  </style>